<template>
  <div class="OptCustomersJob">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item><span class="fs14 bold">客户职业配置</span></el-breadcrumb-item>
    </el-breadcrumb>

    <div class="common-operate-box">
      <el-form class="flexMultiWrap" @keyup.enter.native.stop="enterHander">
        <FormWithLabel label="职业" prop="name">
          <el-input v-model="searchParams.name" placeholder="职业名称"></el-input>
        </FormWithLabel>
        <FormWithLabel label="状态" prop="status">
          <el-select v-model="searchParams.status" placeholder="请选择" clearable>
            <el-option label="全部" :value="undefined"></el-option>
            <el-option label="有效" :value="1"></el-option>
            <el-option label="无效" :value="0"></el-option>
          </el-select>
        </FormWithLabel>
      </el-form>

      <div class="btn-line flexCenter mt30">
        <button class="btn-operate btn-style-main mr20" @click="ajaxGetData">查询</button>
        <button class="btn-operate btn-style-tan" @click="handleClearSearch">重置</button>
      </div>
    </div>

    <div class="common-operate-box">
      <button v-auth-id="'SYM030010'" class="btn-operate btn-style-main mb10" @click="handleAdd">新增职业</button>

      <el-table style="width: 800px;" :max-height="this.tableMaxHeight()" :data="tableData" border>
        <el-table-column
          type="index" label="序号" width="50" header-align="center" align="center">
        </el-table-column>
        <el-table-column
          prop="" label="操作"
          header-align="center" align="center" width="100px">
          <template slot-scope="scope">
            <BtnTb v-auth-id="'SYM030020'" @click="handleEdit(scope.$index)">编辑</BtnTb>
          </template>
        </el-table-column>
        <el-table-column
          prop="status" label="状态"
          header-align="center" align="center" width="100px">
          <template slot-scope="scope">
            {{scope.row.status ? '有效' : '无效'}}
          </template>
        </el-table-column>
        <el-table-column
          prop="name" label="职业"
          header-align="center" align="center">
        </el-table-column>
        <el-table-column
          prop="creater" label="创建人"
          header-align="center" align="center" width="120px">
        </el-table-column>
        <el-table-column
          prop="createTime" label="创建时间"
          header-align="center" align="center" width="180px">
          <template slot-scope="scope">
            {{formatDate(scope.row.createTime, {outType: 'YMDHms'})}}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <SelfDialog
      :isShow="isDialogShow" size="m" :titTxt="statusList[curStatus].txt + '客户职业'"
      @dialogConfirm="handleConfirm" @dialogCancel="handleCancel">
      <el-form ref="form" class="form-wrap flexMultiWrap" :model="tmpData" :rules="rules">
        <FormWithLabel label="职业名称" prop="name">
          <el-input v-model="tmpData.name" placeholder="职业名称"></el-input>
        </FormWithLabel>
        <FormWithLabel label="状态" prop="status">
          <el-select v-model="tmpData.status" placeholder="请选择" clearable>
            <el-option label="有效" :value="true"></el-option>
            <el-option label="无效" :value="false"></el-option>
          </el-select>
        </FormWithLabel>
      </el-form>
    </SelfDialog>
  </div>
</template>

<script type="text/ecmascript-6">
  import SelfDialog from '@/components/SelfDialog'

  import SearchPart from '@/mixins/SearchPart'
  import TableEdit from '@/mixins/TableEdit'

  export default {
    components: {SelfDialog},
    mixins: [SearchPart, TableEdit],
    created () {
      this.ajaxGetData()
    },
    data () {
      return {
        tableData: [],
        rules: {
          name: [{required: true, message: '职业名称必填！'}],
          status: [{required: true, message: '状态必填！'}]
        }
      }
    },
    methods: {
      enterHander () {
        if (!this.enterFlag) {
          this.ajaxGetData()
          this.enterFlag = true
        }
      },
      handleConfirm () {
        if (this.calcCurStatus.key === 'add') {
          this.ajaxAdd()
        } else if (this.calcCurStatus.key === 'edit') {
          this.ajaxEdit()
        }
      },
      ajaxGetData () {
        let postData = {
          pageNum: 0,
          pageSize: 0,
          params: this.searchParams,
          sort: ''
        }
        this.$axios.post('/api/system/profession/list', postData)
          .then(res => {
            this.enterFlag = false // 回车功能设为true
            let resData = res.data.data
            this.tableData = resData.data
          })
      },
      ajaxAdd () {
        this.$refs.form.validate((valid, errMsg) => {
          if (valid) {
            let postData = {name: this.tmpData.name, status: this.tmpData.status}
            return this.$axios.post('/api/system/profession/add', postData)
              .then(res => {
                if (res.data.meta.success) {
                  this.$message.success('新增成功！')
                  this.dialogClose()
                  this.ajaxGetData()
                }
              })
          } else {
            this.$message.error(Object.entries(errMsg)[0][1][0].message)
          }
        })
      },
      ajaxEdit () {
        this.$refs.form.validate((valid, errMsg) => {
          if (valid) {
            let postData = {id: this.tmpData.id, name: this.tmpData.name, status: this.tmpData.status}
            return this.$axios.post('/api/system/profession/update', postData)
              .then(res => {
                if (res.data.meta.success) {
                  this.$message.success('编辑成功！')
                  this.dialogClose()
                  this.ajaxGetData()
                }
              })
          } else {
            this.$message.error(Object.entries(errMsg)[0][1][0].message)
          }
        })
      }
    }
  }
</script>

<style scoped rel="stylesheet/scss" type="text/scss" lang="scss">
  .OptCustomersJob {
  }
</style>
